<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基础功能</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-tags text="标签" plain size="mini" type="warning"> </uv-tags>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义主题</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-tags text="标签"> </uv-tags>
            </view>
            <view class="uv-page__tag-item">
               <uv-tags text="标签" type="warning"> </uv-tags>
            </view>
            <view class="uv-page__tag-item">
               <uv-tags text="标签" type="success"> </uv-tags>
            </view>
            <view class="uv-page__tag-item">
               <uv-tags text="标签" type="error"> </uv-tags>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">圆形标签</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-tags text="标签" plain shape="circle"> </uv-tags>
            </view>
            <view class="uv-page__tag-item">
               <uv-tags text="标签" type="warning" shape="circle"> </uv-tags>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">镂空标签</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-tags text="标签" plain> </uv-tags>
            </view>
            <view class="uv-page__tag-item">
               <uv-tags text="标签" type="warning" plain> </uv-tags>
            </view>
            <view class="uv-page__tag-item">
               <uv-tags text="标签" type="success" plain> </uv-tags>
            </view>
            <view class="uv-page__tag-item">
               <uv-tags text="标签" type="error" plain> </uv-tags>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">镂空带背景色</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-tags text="标签" plain plainFill> </uv-tags>
            </view>
            <view class="uv-page__tag-item">
               <uv-tags text="标签" type="warning" plain plainFill> </uv-tags>
            </view>
            <view class="uv-page__tag-item">
               <uv-tags text="标签" type="success" plain plainFill> </uv-tags>
            </view>
            <view class="uv-page__tag-item">
               <uv-tags text="标签" type="error" plain plainFill> </uv-tags>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义尺寸</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-tags text="标签" plain size="mini"> </uv-tags>
            </view>
            <view class="uv-page__tag-item">
               <uv-tags text="标签" type="warning"> </uv-tags>
            </view>
            <view class="uv-page__tag-item">
               <uv-tags text="标签" type="success" plain size="large"> </uv-tags>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">可关闭标签</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-tags text="标签" size="mini" closable :show="close1" @close="close1 = false">
               </uv-tags>
            </view>
            <view class="uv-page__tag-item">
               <uv-tags text="标签" type="warning" closable :show="close2" @close="close2 = false">
               </uv-tags>
            </view>
            <view class="uv-page__tag-item">
               <uv-tags
                  text="标签"
                  type="success"
                  plain
                  size="large"
                  closable
                  :show="close3"
                  @close="close3 = false"
               >
               </uv-tags>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">关闭按钮的位置</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-tags
                  text="标签"
                  size="mini"
                  closable
                  :show="close4"
                  close-place="right"
                  @close="close4 = false"
               >
               </uv-tags>
            </view>
            <view class="uv-page__tag-item">
               <uv-tags
                  text="标签"
                  type="warning"
                  closable
                  close-place="right"
                  :show="close5"
                  @close="close5 = false"
               >
               </uv-tags>
            </view>
            <view class="uv-page__tag-item">
               <uv-tags
                  text="标签"
                  size="large"
                  type="warning"
                  closable
                  close-place="right"
                  :show="close6"
                  @close="close6 = false"
               >
               </uv-tags>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">带图片和图标</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-tags text="标签" size="mini" icon="map" plain> </uv-tags>
            </view>
            <view class="uv-page__tag-item">
               <uv-tags text="标签" type="warning" icon="tags-fill"> </uv-tags>
            </view>
            <view class="uv-page__tag-item">
               <uv-tags
                  text="标签"
                  type="success"
                  plain
                  size="large"
                  icon="https://cdn.uviewui.com/uview/example/tag.png"
               >
               </uv-tags>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">单选标签</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item" v-for="(item, index) in radios" :key="index">
               <uv-tags
                  :text="`选项${index + 1}`"
                  :plain="!item.checked"
                  type="warning"
                  :name="index"
                  @click="radioClick"
               >
               </uv-tags>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">多选标签</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item" v-for="(item, index) in checkboxs" :key="index">
               <uv-tags
                  :text="`选项${index + 1}`"
                  :plain="!item.checked"
                  type="warning"
                  :name="index"
                  @click="checkboxClick"
               >
               </uv-tags>
            </view>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// 响应式数据
const close1 = ref(true);
const close2 = ref(true);
const close3 = ref(true);
const close4 = ref(true);
const close5 = ref(true);
const close6 = ref(true);

const radios = ref([{ checked: true }, { checked: false }, { checked: false }]);

const checkboxs = ref([{ checked: true }, { checked: false }, { checked: false }]);

// 方法
const radioClick = (name: number) => {
   radios.value.map((item, index) => {
      item.checked = index === name ? true : false;
   });
};

const checkboxClick = (name: number) => {
   checkboxs.value[name].checked = !checkboxs.value[name].checked;
};
</script>

<style lang="scss" scoped>
.uv-page__tag-item {
   margin-right: 20px;
}

.uv-demo-block__content {
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
}
</style>
